/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/*
 * Layout.css
 * This file contains layout styles for foundation layout files.
 * Measurements should all be in "em" unless it is a border.
 * 1em = 12px
 *
 * Quick guide to conversions:
 *      1px = .0833em
 *      2px = .1666em
 *      4px = .25em
 *      6px = .5em
 *      10px = .8333em
 *      12px = 1em
 *      14px = 1.1666em
 *      16px = 1.3333em
 *      18px = 1.25em
 */

#header,
#body,
#footer {
  clear: both;
}

#body_content {
  position: relative;
}

/*
 * Page Header
 */

.page_header a {
  font-size: 12px;
  font-weight: bold;
}

/* Pipeline/Stage Details header - Stages Bar */

#pipeline_status_bar .pipeline .stages .stage_bar_wrapper {
  margin-right: 4px;
  padding-bottom: 19px;
  position: relative;
}

#pipeline_status_bar .pipeline .stages .selected .stage_bar_wrapper {
  background: image_url("g9/backgrounds/details_stage_selected.png") no-repeat 50% 100% transparent;
}

#pipeline_status_bar .pipeline .stages .stage .wrapper {
  margin-right: 4px;
  padding-left: 20px;
  position: relative;
}

#pipeline_status_bar .pipeline .stages .stage:first-child .wrapper {
  padding-left: 0;
}

#pipeline_status_bar .pipeline .stages .stage .trigger_gate {
  position: absolute;
  bottom: 15px;
  left: -4px;
}

#pipeline_status_bar .pipeline .stages .stage .trigger_gate a,
#pipeline_status_bar .pipeline .stages .stage .trigger_gate span {
  width: 20px;
  height: 20px;
  display: block;
}

#pipeline_status_bar .pipeline .stages .stage .trigger_gate a.auto {
  background: image_url("g9/icons/bg_sprite_gateway_icons.png") -2px -30px no-repeat transparent;
}

#pipeline_status_bar .pipeline .stages .stage .trigger_gate a.auto:hover {
  background: image_url("g9/icons/bg_sprite_gateway_icons.png") -2px 0 no-repeat transparent;
}

#pipeline_status_bar .pipeline .stages .stage .trigger_gate span.auto {
  background: image_url("g9/icons/bg_sprite_gateway_icons.png") -2px -60px no-repeat transparent;
}

#pipeline_status_bar .pipeline .stages .stage .trigger_gate a.manual {
  background: image_url("g9/icons/bg_sprite_gateway_icons.png") -32px -30px no-repeat transparent;
}

#pipeline_status_bar .pipeline .stages .stage .trigger_gate a.manual:hover {
  background: image_url("g9/icons/bg_sprite_gateway_icons.png") -32px 0 no-repeat transparent;
}

#pipeline_status_bar .pipeline .stages .stage .trigger_gate span.manual {
  background: image_url("g9/icons/bg_sprite_gateway_icons.png") -32px -60px no-repeat transparent;
}

#pipeline_status_bar .pipeline .stages .stage_bar {
  margin-right: 0;
}

#pipeline_status_bar .pipeline .stage .Unknown {
  margin-right: 4px;
}

#pipeline_status_bar .pipeline .stages .last_run_stage {
  margin-right: 0;
}

#pipeline_status_bar .pipeline .stages .last_run_stage .stage_bar {
  margin-right: 0;
}

/* Pipeline/Stage Details header - Status Bar */
.page_title_bar {
  clear: both;
  margin-bottom: 15px;
  color: #333;
  font-size: 12px;
  border-bottom: 1px solid #ccc;
}

.page_title_bar #page_status_bar {
  clear: both;
  padding: 15px 0;
}

.page_title_bar #page_status_bar .section {
  float: left;
  padding-right: 1em;
}

/* *
 * 2 column layout styles
 */

.two_col .content {
  margin-right: 255px;
}

.two_col .rail {
  border: 1px solid #ccc;
  background-color: #eee;
  float: right;
  width: 235px;
  padding: 15px 0;
  margin-left: 10px;
  border-radius: 6px;
  box-shadow: 0 0 4px #ddd;
}

.rail h3 {
  text-transform: uppercase;
  font-size: 14px;
}

/*
 * ======= ADD ALL NEW STYLES ABOVE THIS LINE.  ONLY FLOAT CLEARING SHOULD GO BELOW ============
 */

/*
 * Float Clearing
 */

#header::after,
#header .header_wrapper::after,
.page_title_bar .page_status_bar::after,
.pipeline_flow .pipeline .stages::after,
.entity_status_wrapper::after,
.page_header::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
